<template>
  <div class="deposit_money_list">
    <el-container class="base_details_container">
      <BackTitleView :title="title" />
      <el-main>
        <div class="base_details_content">
          <div class="content" style="margin-top: 20px">
            <DataCollectTable :data="data" :total="total" :config="getConfig()">
            </DataCollectTable>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="back">关闭</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import BackTitleView from "@com/BackTitleView.vue";
import $ from "@util/base";
import useRoute from "@util/router";
import api from "@api/deposit";

const route = useRoute();

route.watchRouter("depositmoneylist", () => {
  getList();
});

var title = "储值完整记录";
var code = 1;

init();

function init() {
  switch (route.query().type) {
    case "deposit":
      title = "储值余额列表";
      code = 1;
      getList();
      break;
    case "freeze":
      title = "冻结余额列表";
      code = 2;
      getList();
      break;
    case "user":
      title = "储值用户列表";
      code = 3;
      getList();
      break;
  }
}

const getConfig = function () {
  switch (route.query().type) {
    case "deposit":
      return depositConfig;
    case "freeze":
      return freezeConfig;
    case "user":
      return depositConfig;
  }
};

const data = ref([]);
const total = ref(0);

const depositConfig = {
  showIndex: true,
  column: [
    {
      label: "姓名",
      prop: "memberName",
    },
    {
      label: "账号",
      prop: "memberLoginName",
    },
    {
      label: "储值余额",
      prop: "depositMoney",
    },
  ],
};

const freezeConfig = {
  showIndex: true,
  column: [
    {
      label: "姓名",
      prop: "memberName",
    },
    {
      label: "账号",
      prop: "memberLoginName",
    },
    {
      label: "冻结金额",
      prop: "freezeMoney",
    },
  ],
};

function getList() {
  let routeQuery = route.query();
  api.moneyList(
    {
      type: code,
      page: routeQuery.p,
      size: routeQuery.s,
    },
    (val) => {
      total.value = val.total;
      data.value = val.list;
    }
  );
}

function back() {
  route.go(-1);
}
</script>

<style lang="scss">
.deposit_money_list {
  height: 100%;
}
</style>
